<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>atrandafir582</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
    <div id="wrap">
	    <div id="top_content">
	        <div id="header">

						<!-- rightheader -->
						<div id="rightheader">
								<p> 8, Aug 2007<br /> 
									Hey <strong><a href="">Username</a></strong>, <a href="#">Logout</a> </p>
						</div>
						
						<!-- topheader -->
						<div id="topheader">
							<h1 id="title">
								<a href="#">atrandafir582</a>
								<span>1.0</span>
							</h1>
						</div>
							
						<!-- navigation -->
						<div id="navigation">
							<ul>
								<li><a href="#">Home</a></li>
								<li><a href="#">About the template</a></li>
								<li><a href="#">Other handy link</a></li>
								<li><a href="http://www.alexandru.es">About the author</a></li>
							</ul>	         
						</div>
						
				</div>
				<!-- header ends here -->

				<div id="content">
					<p id="whereami">
						Home &gt;
						<a href="#">About the template</a>
					</p>
					<h1> Welcome to atrandafir582 </h1>
					<p>
					<img src="img/nane.gif" class="img_left" alt="Picture inside a parragraph" />
					Hello, this is my first template that I am going to share with everybody, 
					I have originally made it for web-based applications, but I guess it could 
					be used as blog or usual website with little modifications. Feel free to 
					modify, and improve this design, I will apreciate if you will just send me 
					an e-mail with your website url before removing &quot;Template by atrandafir.es&quot; link at 
					the bottom of the page, so I can see how you use it. Enjoy! </p>
					
					<div class="clear"></div>
					
					<h2> Let's put in some text </h2>
					<p>
					Lorem ipsum dolor sit amet consectetuer Cras Ut semper lacus et. 
					Purus montes condimentum libero enim lacus montes ut wisi vitae ac.
					 Vestibulum Curabitur feugiat sed convallis risus Integer nunc amet 
					 orci elit. Leo id ut arcu pretium eu interdum risus nunc eget id. Urna 
					 mauris nibh Integer lorem elit Curabitur ipsum pharetra eu nec. At 
					 Curabitur Quisque tellus.
					</p>

					<p>
					Vitae amet Ut hendrerit Cum Ut non nisl purus vel Integer. Wisi 
					tempus Curabitur quis sit turpis tristique vel Lorem sed consequat. 
					Integer elit Aliquam non gravida auctor congue Curabitur faucibus eget
					 enim. Tempus Nulla ante Maecenas urna dolor urna consequat sociis 
					 fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.
					</p>
					
					<h2> Some lists </h2>
					
					<p> Green one: </p>
					
					<ul class="green">
						<li>Aliquam non gravida auctor congue Curabitur faucibus eget</li>
						<li>enim. Tempus Nulla <a href="">ante Maecenas</a> urna dolor urna consequat sociis</li>
					 	<li>fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.</li>
					</ul>
					
					<p> And the <strong>black</strong>: </p>
					
					<ul class="black">
						<li>Aliquam non gravida auctor congue Curabitur faucibus eget</li>
						<li>enim. Tempus Nulla <a href="">ante Maecenas</a> urna dolor urna consequat sociis</li>
					 	<li>fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.</li>
					</ul>
					
					<p> Don't forget about the <strong>numbers</strong>: </p>
										
					<ol>
						<li>Aliquam non gravida auctor congue Curabitur faucibus eget</li>
						<li>enim. Tempus Nulla <a href="">ante Maecenas</a> urna dolor urna consequat sociis</li>
					 	<li>fringilla orci. Lacinia lacinia ornare ac eros Nam nunc.</li>
					</ol>

					<h2> Here you see a table to display some results </h2>
					
					<table cellpadding="0" cellspacing="0" border="0" width="100%" class="table">
						<!-- table header -->
						<tr class="table_header">
							<td valign="middle" align="left"><a href="#">number</a></td>
							<td valign="middle" align="left"><a href="#">link name</a></td>
							<td valign="middle" align="left">some</td>
							<td valign="middle" align="left">other</td>
							<td valign="middle" align="left">table</td>
							<td valign="middle" align="left">fields</td>
						</tr>
						<!-- row type one -->
						<tr class="row1">
							<td valign="middle" align="left">710375</td>
							<td valign="middle" align="left"><a href="#">Aliquam non gravida</a></td>
							<td valign="middle" align="left">5</td>
							<td valign="middle" align="center">urna</td>
							<td valign="middle" align="center">alfaro</td>
							<td valign="middle" align="center">hunfe</td>
						</tr>
						<!-- row type two -->
						<tr class="row2">
							<td valign="middle" align="left">470110</td>
							<td valign="middle" align="left"><a href="#">Lacinia lacinia ornare ac eros Nam nunc</a></td>
							<td valign="middle" align="left">-45</td>
							<td valign="middle" align="center">consequat</td>
							<td valign="middle" align="center">lajuco</td>
							<td valign="middle" align="center">handy</td>
						</tr>
					</table>
					
					<!-- hint! you can add some &nbsp; between buttons to separate them more -->
					<p class="paging">
						&lt;&lt; First
						&lt; Previous
						<strong>Page 3/3</strong>
						<a href="#"> Next &gt;</a>
						<a href="#">Last &gt;&gt;</a>
					</p>
					
				<!-- and a form example -->
				<h2> This is how a simple form will look </h2>	
				<form action="#" method="post">
				<table cellpadding="0" cellspacing="0" border="0" class="form_table">
					<tr>
						<td valign="middle" align="right">
							Name:
						</td>

						<td valign="middle" align="left">
							<input type="text" class="inputgri" />
						</td>
					</tr>
					<tr>
						<td valign="middle" align="right">E-mail:
						</td>
						<td valign="middle" align="left">

							<input type="text" class="inputgri" />
						</td>
					</tr>
					<tr>
						<td valign="middle" align="right">
							Website:
						</td>
						<td valign="middle" align="left">
							<input type="password" class="inputgri" name="pass3" />

						</td>
					</tr>
					<tr>
						<td valign="middle" align="right">
							Hide e-mail:
						</td>
						<td valign="middle" align="left">
							<select class="inputgri">
								<option>No</option>
								<option>Yes</option>
							</select>

						</td>
					</tr>
					<tr>
						<td valign="top" align="right">
							Message:
						</td>
						<td valign="middle" align="left">
							<textarea rows="3" cols="23" class="inputgri"></textarea>

						</td>
					</tr>
				</table>
				
				<p><input type="submit" class="button" value="Submit &raquo;" /></p>
				</form>
				
				<p>Nunc sed platea pede facilisi odio Vestibulum nibh laoreet sed pellentesque. 
				Urna Phasellus metus est adipiscing nonummy purus tortor Sed amet tellus. 
				In lacinia et Donec velit sed pellentesque </p>
				
				<div class="notice">
					This is a confirmation message after submiting a form.
				</div>
				
				<p>Integer elit Aliquam non gravida auctor congue Curabitur faucibus eget enim. Tempus Nulla ante Maecenas urna dolor urna consequat sociis fringilla orci. Lacinia lacinia ornare ac eros Nam nunc. </p>
				
				<div class="notice_error">
					An error message example.
				</div>
				
				<p>Quisque at turpis ipsum. Orci 
				  penatibus nulla Nam id Pellentesque pharetra lorem sit elit porta. Vitae 
				  id tincidunt nec orci in Nullam lacus Suspendisse ac odio. Interdum Sed interdum morbi neque.</p>
				<div class="other_links">
						<h2>You can also</h2>
						<ul class="other">
							<li><a href="#">Add some links</a></li>
							<li><a href="#">At the bottom of every page</a></li>
							<li><a href="#">To some external websites..</a></li>
						</ul>
					</div>
				

				</div>

	    </div>
			<!-- here ends header + content ( topcontent ) -->
			
	    <!-- footer -->
			<div id="footer">
			<div id="footer_bg">
			
				<!-- right bottom link -->
				<div id="design">
					Template by <a href="http://www.alexandru.es">atrandafir</a>
				</div>
				
				<!-- copyright -->
				<p>
					Designed with &lt;xhtml/&gt; and {css}
				</p>
			
			</div>
			</div>
</div>
</body>
</html>
